import { useState, useEffect } from "react";
import style from "./instance.module.scss";
import { page, removeById } from "@/api/instance";
import { page as definitionPage } from "@/api/definition";
import {
  Form,
  Select,
  DatePicker,
  Input,
  Button,
  Table,
  Modal,
  message,
} from "antd";
import FormItem from "antd/es/form/FormItem";
import { useNavigate } from "react-router-dom";

function Instance() {
  const [pageNum] = useState(1);
  const [pageSize] = useState(15);
  const [searchForm] = Form.useForm();
  const navigate = useNavigate();
  const [tabColumns] = useState([
    {
      title: "名称",
      width: 100,
      dataIndex: "name",
    },
    {
      title: "是否挂起",
      width: 100,
      render: (row) => {
        if (row.suspended === true || row.suspended === "true") {
          return "挂起";
        } else {
          return "激活";
        }
      },
    },
    {
      title: "状态",
      width: 100,
      render: (row) => {
        if (row.end === true || row.end === "true") {
          return "已结束";
        } else {
          return "运行中";
        }
      },
    },
    {
      title: "创建时间",
      width: 100,
      dataIndex: "startTime",
    },
    {
      title: "创建人",
      width: 100,
      dataIndex: "owner",
    },
    {
      title: "完成时间",
      width: 120,
      dataIndex: "endTime",
    },
    {
      title: "持续时间",
      width: 120,
      dataIndex: "durationTime",
    },
    {
      title: "操作",
      width: 120,
      fixed: "right",
      render: (row) => (
        <>
          <div>
            <a
              onClick={() => {
                navigate(`/bpmn/instance/list?id=${row.id}`);
              }}
            >
              任务情况
            </a>
            <a
              style={{ marginLeft: "10px" }}
              onClick={() => {
                alert("流程图");
              }}
            >
              流程图
            </a>
            <a
              style={{ marginLeft: "10px" }}
              onClick={() => {
                del(row.id);
              }}
            >
              删除
            </a>
          </div>
        </>
      ),
    },
  ]);
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);
  const [processSelectList, setProcessSelectList] = useState([]);

  useEffect(() => {
    getPage(pageNum, pageSize);
    getProcessSelect();
  }, []);

  const del = (id) => {
    Modal.confirm({
      title: "确定删除吗？",
      onOk: () => {
        removeById(id).then((res) => {
          if (res.code === 200) {
            getPage(pageNum, pageSize);
            setTimeout(() => {
              message.success("删除成功");
            });
          }
        });
      },
    });
  };

  const getProcessSelect = () => {
    definitionPage({
      pageNum: 1,
      pageSize: 1000,
    }).then((res) => {
      if (res.code === 200) {
        setProcessSelectList(
          res.data.map((item) => {
            return {
              label: item.name,
              value: item.processDefinitionId,
            };
          })
        );
      }
    });
  };

  const getPage = (pageNo, size) => {
    let pageInput = searchForm.getFieldsValue();
    pageInput.pageNum = pageNo;
    pageInput.pageSize = size;
    page(pageInput).then((res) => {
      setDataSource(res.data);
      setTotal(res.total);
    });
  };

  return (
    <>
      <div className={style.instance}>
        <div className={style.top}>
          <Form
            onFinish={() => getPage(pageNum, pageSize)}
            form={searchForm}
            layout={"inline"}
          >
            <FormItem name={"name"} label="名称">
              <Input />
            </FormItem>
            <FormItem name={"startDate"} label="开始日期">
              <DatePicker />
            </FormItem>
            <FormItem name={"endDate"} label="结束日期">
              <DatePicker />
            </FormItem>
            <FormItem name={"processDefinitionId"} label="流程">
              <Select
                allowClear
                style={{ width: "140px", lineHeight: "32px", height: "32px" }}
                size="large"
                options={processSelectList}
              />
            </FormItem>
            <FormItem>
              <Button htmlType={"submit"} type={"primary"}>
                搜索
              </Button>
            </FormItem>
            <FormItem>
              <Button
                onClick={() => {
                  searchForm.resetFields();
                  getPage(pageNum, pageSize);
                }}
              >
                重置
              </Button>
            </FormItem>
          </Form>
        </div>
        <div className={style.content}>
          <div className="tabTools">
            <Button
              type={"primary"}
              onClick={() => {
                setVisible(true);
                setTitle("新增");
              }}
            >
              新增
            </Button>
          </div>
          <Table
            rowKey={"id"}
            columns={tabColumns}
            dataSource={dataSource}
            pagination={{
              total: total,
              pageSize: pageSize,
              onChange: (page, size) => {
                getPage(page, size);
              },
              position: "bottom",
            }}
          />
        </div>
      </div>
    </>
  );
}
export default Instance;
